<template>
  <view class="content">
    <view class="top">
      <!--      <view class="task-message" v-if="config.inviterRewardType!=3 || config.inviteeRewardType!=3">-->
      <!--        <text v-if="config.inviterRewardType!=3">每邀请一位新用户你可赚{{ config.inviterRewardAmount }}</text>-->
      <!--        <br>-->
      <!--        <text v-if="config.inviteeRewardType!=3">好友可领{{ config.inviteeRewardAmount }}</text>-->
      <!--      </view>-->
      <!--      <view class="task-desc">被你邀请的人，注册成为人康会员同时添加健康顾问为好友即为邀请成功</view>-->
    </view>
    <scroll-view scroll-y="true" v-if="config.slider" :scroll-into-view="'message'+messageIndex" scroll-with-animation
                 class="message-gundong">
      <view :id="'message'+index" class="message-text" v-for="(item,index) in config.slider">{{ item }}</view>
    </scroll-view>
    <!-- 参与步骤 -->
    <view class="item item-b">
      <view class="title">
        <view class="item-left-icon"></view>
        <view class="item-title">参与步骤</view>
        <view class="item-right-icon"></view>
      </view>
      <view class="technologicalProcess">
        <button class="fenxiang" open-type="share"></button>
        <view class="technologicalProcess-button"></view>
      </view>
    </view>
    <!-- 我的奖励 -->
    <!--    <view class="item" v-if="config.inviterRewardType!=3">-->
    <!--      <view class="title">-->
    <!--        <view class="item-left-icon"></view>-->
    <!--        <view class="item-title">我的奖励</view>-->
    <!--        <view class="item-right-icon"></view>-->
    <!--      </view>-->
    <!--      <view class="count">-->
    <!--        <view class="count-item count-item1">-->
    <!--          <view class="count-message">累计获得</view>-->
    <!--          <view class="count-value">-->
    <!--            <text>{{ config.totalRedpacketAmountString || '0' }}</text>-->
    <!--            元-->
    <!--            <text>{{ config.totalIntegralAmount || '0' }}</text>-->
    <!--            积分-->
    <!--          </view>-->
    <!--        </view>-->
    <!--        <view class="count-xian"></view>-->
    <!--        <view class="count-item count-item2">-->
    <!--          <view class="count-message">成功邀请</view>-->
    <!--          <view class="count-value">-->
    <!--            <text>{{ config.inviteCount }}</text>-->
    <!--            人-->
    <!--          </view>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--    </view>-->
    <!-- 邀请记录 -->
    <view class="item">
      <view class="title">
        <view class="item-left-icon"></view>
        <view class="item-title">邀请记录</view>
        <view class="item-right-icon"></view>
      </view>
      <view class="log-list">
        <view class="th">
          <view class="tr">邀请人</view>
          <view class="tr">当前进展</view>
          <view class="tr">已获得奖励</view>
        </view>
        <view class="td" v-for="item in config.introducerIntroduceRecordList">
          <view class="tr username">{{ item.introducedCustomerName || '暂未获取' }}</view>
          <view class="tr type">
            <text class="type1" v-if="item.progress=='已注册未加好友'">{{ item.progress }}</text>
            <text class="type2" v-else>{{ item.progress }}</text>
          </view>
          <view class="tr center">{{ item.rewardAmount }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messageList: ['刘**获得了1元红包', '刘**获得了2元红包', '刘**获得了3元红包'],
      messageIndex: 0,
      messageTime: 1000,
      config: {},
      inviteString: ""
    }
  },
  onLoad() {
    this.getConfig()
    this.getInviteCode()
  },
  methods: {
    //获取邀请code
    async getInviteCode() {
      const {
        data
      } = await this.$NoteApi.doRequest("post", 'introducer/introduceString', {}, 'json', true)
      this.inviteString = data.data
    },
    //获取配置信息
    async getConfig() {
      const {
        data
      } = await this.$NoteApi.doRequest('post', 'introducer/introduceTask', {}, 'json', true)
      if (data.code == 0) {
        var res = data.data;
        this.config = res;
        // if (res.activityEnable != 1) {
        //   uni.showModal({
        //     title: '提示',
        //     content: "活动已关闭",
        //     success() {
        //       uni.switchTab({
        //         url: "/pages/sindex/index"
        //       })
        //     }
        //   })
        // }
        this.messageInit()
      }
    },
    messageInit() {
      var _this = this;
      setInterval(function () {
        if ((_this.messageList.length) - 1 <= _this.messageIndex) {
          _this.messageIndex = 0
        } else {
          _this.messageIndex = _this.messageIndex + 1
        }
      }, this.messageTime)
    },
    yaoqing() {
      uni.navigateTo({
        url: "./user"
      })
    },
    onShareAppMessage(e) {
      if (e.from == 'button') {
        return {
          title: "加入人康，一起健康",
          imageUrl: "https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/newMember/bg_user@2x.png",
          path: '/pages/newMember/user?inviteString=' + this.inviteString
        }
      }
    }
  }
}
</script>

<style>
.content {
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: #E6FFEE;
}

.top {
  width: 100%;
  height: 540upx;
  background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/newMember/bg_fenxiangv2.png);
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-top: 209upx;
  position: relative;
}

.task-message {
  width: 689upx;
  box-sizing: border-box;
  padding: 9upx 0upx;
  background-color: rgba(0, 93, 9, 0.24);
  margin: 0upx auto;
  font-size: 38upx;
  font-weight: 600;
  color: #fff;
  line-height: 48upx;
  text-shadow: 0px 3px 2px rgba(0, 93, 9, 0.24);
  text-align: center;
  box-shadow: 4upx 0 4upx 4upx #67A979;
  border-radius: 18upx;
}

.task-desc {
  width: 710upx;
  height: 151upx;
  bottom: -74upx;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: #fff;
  border-radius: 20upx;
  box-shadow: 0px 2upx 10upx 0px rgba(7, 61, 9, 0.2);
  font-size: 36upx;
  color: #5cae77;
  font-weight: 600;
  text-align: center;
  line-height: 50upx;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 26upx 38upx;
}

.message-gundong {
  width: 560upx;
  height: 60upx;
  background-color: #D1EFE8;
  border-radius: 8upx;
  margin: 0 auto;
  margin-top: 101upx;
  line-height: 60upx;
  text-align: center;
  font-size: 38upx;
  color: #42220F;
  margin-bottom: 43upx;
  overflow: auto;
}

.item {
  width: 100%;
  box-sizing: border-box;
  padding: 0 30upx;
  margin-bottom: 59upx;
}

.item .title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20upx;
}

.item-left-icon,
.item-right-icon {
  width: 128upx;
  height: 35upx;
}

.item-left-icon {
  background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/newMember/icon_biaoti_zuo@2x.png);
  background-size: 100% 100%;
}

.item-right-icon {
  background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/newMember/icon_biaoti_you@2x.png);
  background-size: 100% 100%;
}

.item-title {
  font-size: 52upx;
  font-weight: 700;
  color: #333;
  margin: 0 24upx;
}

.technologicalProcess {
  width: 100%;
  height: 486upx;
  position: relative;
}

.technologicalProcess-button {
  width: 516upx;
  height: 136upx;
  background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/newMember/tab_yaoqing@2x.png);
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  bottom: 32upx;
  transform: translate(-50%, 0);
}

.fenxiang {
  width: 516upx;
  height: 136upx;
  position: absolute;
  left: 50%;
  bottom: 32upx;
  transform: translate(-50%, 0);
  z-index: 1;
  opacity: 0;
}

.count {
  width: 100%;
  height: 200upx;
  border-radius: 16upx;
  background: #FFFFFF;
  box-shadow: 0px 6upx 15upx 0px rgba(0, 96, 30, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.count-xian {
  width: 4upx;
  height: 140upx;
  border-radius: 2upx;
  background-color: #DDE3DE;
}

.count-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.count-item1 {
  flex: 0.6;
}

.count-item2 {
  flex: 0.4;
}

.count-message {
  font-size: 34upx;
  color: #333;
}

.count-value {
  font-size: 32upx;
  color: #333;
}

.count-value text {
  font-size: 60upx;
  font-weight: 700;
  color: #333;
}

.log-list {
  width: 100%;
  border-radius: 16upx;
  background: #FFFFFF;
  box-shadow: 0px 6upx 15upx 0px rgba(0, 96, 30, 0.2);
  box-sizing: border-box;
  padding: 20upx;
}

.th {
  width: 100%;
  height: 85upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #DAE6E3;
  font-size: 34upx;
  color: #666;
  border-radius: 8upx;
  box-sizing: border-box;
  padding: 0upx 20upx;
}

.th .tr {
  width: 30%;
}

.td {
  width: 100%;
  height: 110upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 34upx;
  border-radius: 8upx;
  box-sizing: border-box;
  padding: 0upx 20upx;
  border-bottom: 2upx solid #D1EFE8;
}

.td .tr {
  width: 30%;
  white-space: nowrap;
}

.username {
  font-weight: 600;
  color: #666666;
  width: 25% !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.type {
  text-align: center;
  width: 35% !important;
}

.type1 {
  color: #9F7373;
}

.type2 {
  color: #62BF84;
}

.center {
  text-align: center;
}

.item-b {
  background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/newMember/img_yaoqinghaoyaov2.png);
  background-size: 100% 100%;
  border-radius: 16upx;
  margin: 0 auto;
  margin-top: -150upx;
  width: 690upx;
  padding: 0;
  padding-top: 49upx;
  position: relative;
  z-index: 2;

}
</style>
